<div class="d-editor-overlay hidden"></div>

<div class="d-editor-container">
  {{#if this.showPreview}}
    <div
      class="d-editor-preview-wrapper {{if this.forcePreview 'force-preview'}}"
    >
      <div class="d-editor-preview">
        {{html-safe this.preview}}
      </div>
    </div>
  {{else}}
    <div class="d-editor-textarea-wrapper">
      <div class="d-editor-button-bar">
        {{#each this.toolbar.groups as |group|}}
          {{#each group.buttons as |b|}}
            {{#if b.popupMenu}}
              {{toolbar-popup-menu-options
                onPopupMenuAction=this.onPopupMenuAction
                onExpand=(action b.action b)
                class=b.className
                content=this.popupMenuOptions
                options=(hash popupTitle=b.title icon=b.icon)
              }}
            {{else}}
              <div>{{b.icon}}</div>
              <button
                class="wizard-btn {{b.className}}"
                {{action b.action b}}
                title={{b.title}}
                type="button"
              >
                {{d-icon b.icon}}
                {{#if b.label}}
                  <span class="d-button-label">{{i18n b.label}}</span>
                {{/if}}
              </button>
            {{/if}}
          {{/each}}

          {{#unless group.lastGroup}}
            <div class="d-editor-spacer"></div>
          {{/unless}}
        {{/each}}
      </div>

      {{conditional-loading-spinner condition=this.loading}}
      <Textarea
        tabindex={{this.tabindex}}
        @value={{this.value}}
        class="d-editor-input"
        placeholder={{this.placeholder}}
      />
    </div>
  {{/if}}
</div>